<style>
    .panel { padding: 5px 10px; width: 100%; }
    .panel h5 { margin: 0; padding: 0; color: #959595; font-size: 12px; display: inline-block; }
    .panel h5 b { text-decoration: underline; }

    #list { width: 100%; margin: 20px 0; max-height: 400px; padding: 5px 10px; overflow-y:auto; border: 1px solid #aaa; }
    #list ul{ list-style: none; padding: 0 0 0 15px; margin: 0; }
    #list ul li{ padding: 0; margin: 10px 0; }
    #list p{ padding: 0; margin: 10px 0; }
    #list .cb_line{ height: 16px; line-height: 16px; display: inline-block; }
    #list .cb_icon{ width: 16px; height: 16px; display: inline-block; vertical-align: middle; border: 0; }
    #list .minus{ background-image: url(/public/static/images/minus.png); }
    #list .plus{ background-image: url(/public/static/images/plus.png); }
</style>

<div class="tab-content">
    <div class="panel">
        <div class="title">
            <div>
                <h5>
                    您正在编辑用户 <b><{$user.UserName}></b> 的菜单权限
                </h5>
            </div>
        </div>
        <div id="list">请先选择应用。</div>
        <a id="save" href="javascript:;" class="btn btn-primary" style="display: none;">保存</a>
        <a href="/auth/?r=user/index" class="btn btn-default">返回</a> 
        <!--<a href="/main/?r=role/index&system=<{$role.SystemID}>&pid=<{$role.RoleParentID}>" class="btn btn-default">返回</a>-->
    </div>

</div>

<script>
    $(function(){
        var menuList    = $('#list'),
                defaultText = menuList.text(),
                cache       = new Object(),
                app         = $("#app"),
                btn         = $("#save"),
                loading     = false,
                saving      = false;

        $(document).on('click', ".minus, .plus", function(){
            $(this).toggleClass('minus plus').parent().next('ul').stop(true, true).slideToggle('fast');
        }).on('change', ".cb_line input", function(){
            $(this).parent('.cb_line').next('ul').find('input').prop('checked', $(this).is(":checked"));

            if($(this).is(":checked")){
                $(this).parent().parent().find('.minus, .plus').removeClass('plus').addClass('minus').parent().next('ul').stop(true, true).slideDown('fast');
                $(this).parents('li').children('.cb_line').find('input').prop('checked', true);
            }
        });

        $.get('/auth/?r=user/getGrantMenu', { 'user' : '<{$user.UserID}>' }, function(rs){
            show(rs);
        });

        btn.show();

        btn.click(function(){
            if(saving) return;

            var menuAdd = [], menuDel = [];

            $("#list").find('input[type=checkbox]').each(function(){
                if($(this).is(':checked')){
                    menuAdd.push($(this).val());
                }else{
                    menuDel.push($(this).val());
                }
            });

            var data = {
                add     : menuAdd,
                delete  : menuDel,
                user    : '<{$user.UserID}>'
            };

            saving = true;
            $.get('/auth/?r=user/doGrant', data, function(rs){
                saving = false;
                if(rs == '1'){
                    delete(cache[app.val()]);
                    alert('保存成功！');
                }else{
                    alert('保存失败！');
                }
            });
        });

        function show(data){
            menuList.html(data)
                    .children('ul')
                    .find('ul')
                    .prev(".cb_line")
                    .find(".cb_icon")
                    .addClass('minus');
        }
    });
</script>